<!-- src/App.vue -->
<template>
  <div class="calculator">
    <input type="text" v-model="display" readonly class="display" />
    <div class="buttons">
      <button @click="clear">C</button>
      <button @click="append('7')">7</button>
      <button @click="append('8')">8</button>
      <button @click="append('9')">9</button>
      <button @click="append('/')">/</button>
      <button @click="append('4')">4</button>
      <button @click="append('5')">5</button>
      <button @click="append('6')">6</button>
      <button @click="append('*')">*</button>
      <button @click="append('1')">1</button>
      <button @click="append('2')">2</button>
      <button @click="append('3')">3</button>
      <button @click="append('-')">-</button>
      <button @click="append('0')" class="zero">0</button>
      <button @click="append('.')">.</button>
      <button @click="append('+')">+</button>
      <button @click="calculate" class="equals">=</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const display = ref<string>('');
const currentInput = ref<string>('');
const operator = ref<string | null>(null);
const previousValue = ref<number | null>(null);

const updateDisplay = () => {
  if (previousValue.value !== null && operator.value) {
    display.value = `${previousValue.value} ${operator.value} ${currentInput.value}`;
  } else {
    display.value = currentInput.value;
  }
};

const append = (value: string) => {
  if (['+', '-', '*', '/'].includes(value)) {
    if (currentInput.value) {
      if (previousValue.value !== null && operator.value) {
        calculate();
      } else {
        previousValue.value = parseFloat(currentInput.value);
      }
      currentInput.value = '';
    } else if (previousValue.value === null && display.value) {
      // 如果没有当前输入，但有显示（可能是上一个结果），用显示作为previous
      previousValue.value = parseFloat(display.value);
    }
    operator.value = value;
    updateDisplay();
    return;
  }

  // 输入限制：单次数字（不包括小数点）不能超过9位
  const digitsWithoutDot = currentInput.value.replace('.', '').length;
  if (value !== '.' && digitsWithoutDot >= 9) {
    return; // 忽略新数字输入
  }

  // 小数点限制：只能有一个
  if (value === '.' && currentInput.value.includes('.')) {
    return; // 忽略重复小数点
  }

  currentInput.value += value;
  updateDisplay();
};

const calculate = () => {
  if (previousValue.value === null || !operator.value || !currentInput.value) return;
  const current = parseFloat(currentInput.value);
  if (isNaN(current)) return;
  let result: number;
  switch (operator.value) {
    case '+':
      result = previousValue.value + current;
      break;
    case '-':
      result = previousValue.value - current;
      break;
    case '*':
      result = previousValue.value * current;
      break;
    case '/':
      if (current === 0) {
        display.value = 'Error';
        clear();
        return;
      }
      result = previousValue.value / current;
      break;
    default:
      return;
  }
  display.value = result.toString();
  previousValue.value = result;
  currentInput.value = '';
  operator.value = null;
};

const clear = () => {
  display.value = '';
  currentInput.value = '';
  previousValue.value = null;
  operator.value = null;
};
</script>

<style scoped>
.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
}

.display {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;
  box-sizing: border-box;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  height: 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  background-color: #e0e0e0;
  cursor: pointer;
}

button:hover {
  background-color: #d0d0d0;
}

.zero {
  grid-column: span 2;
}

.equals {
  grid-column: span 2;
  background-color: #4caf50;
  color: white;
}

.equals:hover {
  background-color: #45a049;
}
</style>
